<!--
* @author wn
* @date 2022/09/01 10:23:09
* @description: 支付宝支付成功后 回跳页面--支付结果
!-->
<template>
	<div class="pay-call-back container">
		<xtx-bread>
			<xtx-bread-item to="/">首页</xtx-bread-item>
			<xtx-bread-item to="/cart">购物车</xtx-bread-item>
			<xtx-bread-item>支付结果</xtx-bread-item>
		</xtx-bread>
		<!-- 支付结果 -->
		<section>
			<template v-if="orderDetail?.orderState === 1">
				<i class="iconfont icon-shanchu red"></i>
				<p class="tit">订单支付失败(待付款)</p>
			</template>
			<template v-if="orderDetail?.orderState === 2">
				<i class="iconfont icon-queren2 green"></i>
				<p class="tit">订单支付成功(待发货)</p>
			</template>
			<p class="tip">我们将尽快为您发货，收货期间请保持手机畅通</p>
			<p>
				支付方式：
				<span
					>{{ orderDetail?.payChannel === 1 ? '支付宝支付' : '微信支付' }}
				</span>
			</p>
			<p>
				支付金额：<span class="red">¥{{ orderDetail?.payMoney }}</span>
			</p>
			<div class="btn">
				<xtx-button
					@click="$router.push('/member/order')"
					type="primary"
					style="margin-right: 20px"
				>
					查看订单
				</xtx-button>
				<xtx-button type="gray">进入首页</xtx-button>
			</div>
			<p class="alert">
				<i class="iconfont icon-tip"></i>
				温馨提示：小兔鲜儿不会以订单异常、系统升级为由要求您点击任何网址链接进行退款操作，保护资产、谨慎操作。
			</p>
		</section>
	</div>
</template>
<script>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { findOrderDetail } from '@/network/order'
// import { useStore } from 'vuex'

export default {
	name: 'CallBack',
	setup() {
		// 支付时  打开 正在支付 对话框   支付完成  关闭  或者 更改内容 函数
		// 传递 orderDetail.orderState  1是失败 2是待发货
		// 跨路由  页面通信
		// const store = useStore()
		// console.log('!!!!', store.state.user.paySuccessFn)

		// 获取订单详情
		const route = useRoute()
		const orderDetail = ref(null)
		findOrderDetail(route.query.orderId).then(({ result }) => {
			orderDetail.value = result
			// store.commit('user/setPaySuccessFn', true)
		})

		return { orderDetail }
	},
}
</script>
<style scoped lang="less">
.pay-call-back {
	margin-bottom: 20px;
	section {
		padding: 100px 0;
		background: #fff;
		text-align: center;
		> .iconfont {
			font-size: 100px;
		}
		.green {
			color: #1dc779;
		}
		.red {
			color: @priceColor;
		}
		.tit {
			font-size: 24px;
		}
		.tip {
			color: #999;
		}
		p {
			line-height: 40px;
			font-size: 16px;
		}
		.btn {
			margin-top: 50px;
		}
		.alert {
			font-size: 12px;
			color: #999;
			margin-top: 50px;
		}
	}
}
</style>
